<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <h:form id="frmBandejaUsuarios">
        <p:growl id="msgBandejaUsuarios"/>
        <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td style="text-align: left;vertical-align: bottom;padding-bottom: 4px;" >
                    <h:outputText value=":: Módulo de Usuarios" styleClass="ui-tittle-text"/>
                </td>
            </tr>
        </table>
        <p:separator />
        <table border="0" style="width: 99%" align="center">
            <tr>
                <td>
                    <p:fieldset style="background-color:#F1FDFD;width: 99%;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table border="0" width="100%">
                                        <tr>
                                            <td style="width:4%">
                                                <h:outputText class="colorTexto" value="Usuario: " />
                                            </td>
                                            <td style="padding-right: 20px;width: 50px">
                                                <p:autoComplete id="usuario" minQueryLength="2" value="#{usuarioMb.b_usuario}" completeMethod="#{usuarioMb.autoCompleteUsuario}" effect="fade" size="30"
                                                                var="u" itemLabel="#{u.username}" itemValue="#{u.username}" scrollHeight="150">
                                                    <p:column>
                                                        <h:outputText value="#{u.username}" />
                                                    </p:column>
                                                    <p:column>
                                                        <h:outputText value="#{u.rol.descripcion}" />
                                                    </p:column>
                                                </p:autoComplete>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </p:fieldset>
                    <p:spacer height="10" width="10" />
                    <p:dataTable id="tblListaUsuarios"
                                 emptyMessage="Sin usuarios a mostrar"
                                 value="#{usuarioMb.usuarios}"
                                 var="usuario"
                                 editable="true" 
                                 scrollable="true" scrollHeight="430"
                                 paginator="true" rows="14" paginatorPosition="bottom" rowsPerPageTemplate="20,25,30"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 selectionMode="single"
                                 selection="#{usuarioMb.usuario}"
                                 rowKey="#{usuario.id}">
                        <p:ajax event="rowEdit" listener="#{usuarioMb.onRowEdit}" update=":frmBandejaUsuarios:msgBandejaUsuarios" />
                        <p:ajax event="rowEditCancel" listener="#{usuarioMb.onRowCancel}" update=":frmBandejaUsuarios:msgBandejaUsuarios" />
                        <p:column headerText="Nro." style="width: 10px;">
                            #{usuario.id}
                        </p:column>
                        <p:column headerText="Nombre" style="width: 185px;">                         
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{usuario.nombre}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{usuario.nombre}"/>
                                </f:facet>
                            </p:cellEditor>        
                        </p:column>
                        <p:column headerText="Ape.Paterno" style="width: 70px;">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{usuario.paterno}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{usuario.paterno}"/>
                                </f:facet>
                            </p:cellEditor>  
                        </p:column>
                        <p:column headerText="Ape. Materno" style="width: 50px;">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{usuario.materno}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{usuario.materno}"/>
                                </f:facet>
                            </p:cellEditor>  

                        </p:column>
                        <p:column headerText="Telefono" style="width: 60px;">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{usuario.telefono}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{usuario.telefono}"/>
                                </f:facet>
                            </p:cellEditor>  

                        </p:column>
                        <p:column headerText="Username" style="width: 60px;">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{usuario.username}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{usuario.username}"/>
                                </f:facet>
                            </p:cellEditor>  
                        </p:column>
                        <p:column headerText="Rol" style="width: 60px;">
                            <h:outputText value="#{usuario.rol.descripcion}"/>
                        </p:column>
                        <p:column style="width:32px">
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>
                </td>
            </tr>
        </table>
    </h:form>
    <p:dialog header="Buscando..." id="dlgBuscando"
              widgetVar="wvBuscando" modal="true" styleClass="ui-campo_formulario" 
              closable="no">
        <div align="center" style="width: 100%">
            <img src="imagenes/loading_serch.gif" border="0" />
        </div>
    </p:dialog>
    <p:dialog header="Procesando..." id="dlgProcesando"
              widgetVar="wvProcesando" modal="true" styleClass="ui-campo_formulario" 
              closable="no">
        <div align="center" style="width: 100%">
            <img src="imagenes/loading2.gif" border="0" />
        </div>
    </p:dialog>
</ui:composition>

